<template>
  <div class="details">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <router-link
          tag="div"
          :to="back"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <!-- 产品 -->
        <van-tabs v-model="active" swipeable animated class="header_right">
          <van-tab title="产品" class="product">
            <div class="scolly">
              <div class="img">
                <img :src="productImg" alt="" />
              </div>
              <div class="work">
                <div class="title">
                  <strong>{{ informationTitleOne }}-</strong
                  >{{ informationTitleTwo }}
                </div>
                <div class="customerService iconfont icon-kefuerji">
                  <p>客服</p>
                </div>
              </div>

              <div class="vip">
                <div class="imgs">
                  <img :src="require('../assets/img/78.png')" alt="" />
                  <p>限时升级尊享会员，下单返现</p>
                </div>
                <div class="receive"><p>去领取</p></div>
              </div>

              <div class="score">
                <div class="score_top" @click="active = 2">
                  <div class="star">
                    <van-rate
                      v-model="value"
                      allow-half
                      readonly
                      void-color="#eee"
                      color="#ffa01e"
                    />
                    <span>4.5分</span>
                  </div>
                  <div class="comment">
                    （132条评论）<i class="iconfont icon-qianjin"></i>
                  </div>
                </div>
                <div class="score_bottom">
                  <ul>
                    <li>服务贴心</li>
                    <li>环境好</li>
                    <li>温泉不错</li>
                    <li>早餐丰富</li>
                    <li>房间不错</li>
                  </ul>
                </div>
              </div>

              <!-- 地址 -->
              <div class="address">
                <div class="location">
                  <p>
                    <a
                      :href="
                        'http://api.map.baidu.com/marker?location=' +
                        latitude +
                        ',' +
                        longitude +
                        '&title=' +
                        address +
                        '&output=html'
                      "
                      >{{ address }}</a
                    >
                  </p>
                  <p>
                    {{ month }}月{{ day }}日 {{ temperature }} {{ weather }}
                  </p>
                </div>
                <div class="go iconfont icon-qianjin"></div>
              </div>

              <!-- 特色 -->
              <div class="characteristic" @click="point">
                <p><strong>特色介绍</strong></p>
                <div class="go iconfont icon-qianjin"></div>
              </div>

              <!-- 购买须知 -->
              <div class="know" @click="buyknow">
                <p><strong>购买须知</strong></p>
                <div class="go iconfont icon-qianjin"></div>
              </div>

              <!-- 产品分类 -->
              <div class="producetype" ref="type">
                <van-collapse v-model="activeName" accordion>
                  <div v-for="(item, index) in lists" :key="item.tagName">
                    <van-collapse-item
                      :title="item.tagName"
                      :name="index + 1"
                      :value="'￥' + item.miniPrice + '起'"
                    >
                      <div
                        class="more"
                        v-for="items in item.packageInfos[0]"
                        :key="items.productPackageId"
                      >
                        <p class="more_title">{{ items.packageName }}</p>
                        <div class="condition">
                          <ul>
                            <li
                              v-for="it in items.externalInfoTag"
                              :key="it.type"
                            >
                              {{ it.value }} <span>·</span>
                            </li>
                          </ul>
                        </div>
                        <div class="pricelist">
                          <div class="three">
                            <!-- 价格 -->
                            <div class="price">
                              ￥<span>{{ items.miniPrice }}</span
                              >起
                            </div>
                            <div class="oldprice">
                              ￥{{ items.retailPrice }}
                            </div>

                            <!-- 套餐说明 -->
                            <div class="explain">
                              <p @click="Package(items.productPackageId)">
                                套餐说明<i
                                  class="iconfont icon-icon_sanjiaoxing"
                                ></i>
                              </p>
                            </div>
                          </div>

                          <!-- 预定 -->
                          <div
                            class="reserve"
                            @click="bookdata(items.productPackageId)"
                          >
                            预订
                          </div>
                        </div>
                        <p class="book">需提前0天的18:01前预订</p>
                      </div>
                    </van-collapse-item>
                  </div>
                </van-collapse>
              </div>
              <!-- 购买须知 -->
              <div class="PurchaseInstructions">
                <h3>购买须知</h3>
                <h5 class="important">【防疫政策】</h5>
                <p>
                  中高风险地区不接待，来自深圳的客人需要24小时核酸+到达从化马上做—次核酸+绿码才可以入住,其他地区48小时核酸+绿码入住
                </p>
                <h5>【使用方式】</h5>
                <p>
                  办理入住方式:请携带个人有效身份证件（一人一证)，在酒店前台报姓名、手机号入住。
                </p>
                <h5>【套餐消费限制】</h5>
                <div class="lookmore" v-show="look">
                  <p>
                    每日15:00之后入住(具体视酒店当天入住率而定),次日12:00之前退房，超时将加收房费，当天18:00之前收取半天房费，18:00之后收取全天房费。
                  </p>
                  <p>
                    入住时需交住房押金(具体金额以办理入住时酒店公布为准)，退房时如无物品损坏或其它消费，押金将如数退还。
                  </p>
                  <p>
                    每间房最多2名成人入住，1.2m(不含)以下儿童不占床位免费，如需加床,平日300/张，周末500/张(床型为1.2m，婴儿床免费)。
                  </p>
                  <p>
                    为保证您和其他旅客的安全，和良好的睡眠质量，请您不要携带宠物入住。
                  </p>
                  <h5>【额外服务提示】</h5>
                  <p>酒店提供免费停车,停车位先到先得。</p>
                  <h5>【安全提示】</h5>
                  <p>旅游出行有风险,建议您自行购买相关保险。</p>
                  <p>
                    为提高游客的出行安全意识，普及旅游基本安全常识，减少安全事故的发生，请您在预订产品前，仔细阅读《要出发旅游安全手册》并在旅游过程中严格遵守各项安全注意事项，保障您拥有一个愉快的旅程。
                  </p>
                  <h5>【价格说明】</h5>
                  <p>
                    本平台展示的商品划横线价格为顾客参考价格，该价格可能是景区/酒店等终端产品提供方曾经的门市价、挂牌价或该商品在其他平台上曾经展示过的销售价,不具备原价的含义,该价格仅供您参考。
                  </p>
                  <p>到手价为使用优惠券和红包(积分)后支付的价格。</p>
                  <p>分享券后价为使用分享券和红包（积分)后支付的价格。</p>
                </div>
                <div class="lookup" v-show="!look" @click="look = true">
                  查看全部
                </div>
              </div>
            </div>
          </van-tab>

          <!-- 详情 -->
          <van-tab title="详情">
            <div
              v-html="productIntroduction"
              class="particulars"
              style="padding: 20px 0 50px 0"
            ></div>
          </van-tab>

          <!-- 评价 -->
          <van-tab title="评价">
            <lazy-component>
              
              <div class="assess">
                <ul>
                  <li :class="[type == 1 ? 'con' : '']" @click="all">全部</li>
                  <li :class="[type == 2 ? 'con' : '']" @click="Wellreceived">
                    好评
                  </li>
                  <li
                    :class="[type == 3 ? 'con' : '']"
                    @click="negativecomment"
                  >
                    差评
                  </li>
                  <li :class="[type == 4 ? 'con' : '']" @click="haveimg">
                    有图
                  </li>
                </ul>
                 <div class="myassess" v-if="Mycomments">
                <div class="valuators">
                  <ul >
                    <li v-for="(item,index) in Mycom" :key="index">
                      <div class="valuator_top">
                        <!-- 头像 -->
                        <div class="portrait">
                          <img
                            :src="require('../assets/img/UK.png')"
                            alt=""
                          />
                          <div class="grade">Lv.20</div>
                        </div>
                        <!-- 用户名称 -->
                        <div class="user">
                          <strong>梁**</strong>
                        </div>
                        <div class="medal">
                          <img src="https://qiniu-cdn7.jinxidao.com/m/images/level/app/head_silver_member_icon.png" alt="" />
                        </div>

                        <div class="starlevel">
                          <ul>
                            <li v-for="(i, indexa) in item.value" :key="indexa">
                              <img
                                :src="require('../assets/img/ut.png')"
                                alt=""
                              />
                            </li>
                            <li v-for="(is, indexs) in 5 - item.value"
                              :key="indexs + 'ggg'"
                            >
                              <img
                                :src="require('../assets/img/fs.png')"
                                alt=""
                              />
                            </li>
                          </ul>
                          <span
                            ><strong>{{item.value}}.0</strong></span
                          >
                        </div>
                      </div>
                      <div class="valuator_title">
                       {{item.text}}
                      </div>
                      <div class="valuator_img">
                        <ul>
                          <li v-for="(img,index) in item.fileList"
                            :key="index"
                          >
                            <img  v-lazy=" img.content  " alt=""
                            />
                          </li>
                        </ul>
                      </div>
                      <div class="valuator_choose">
                        {{ item.bigtitle }}
                      </div>
                      <div class="buyTime">
                        <p>
                          {{item.year}}-{{item.month}}-{{item.day}} {{item.hours}}:{{item.minutes}}:{{item.seconds}}
                          <span>朋友结伴</span>
                        </p>
                        <div
                          :class="[
                            'fabulous',
                            'iconfont',
                            'icon-dianzan',
                          ]"
                        >
                            <!-- item.isHasSetGood ? 'con' : '', -->
                          <!-- @click="zan(item.commentId)" -->
                          <span>0</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
                <div class="valuator">
                  <ul>
                    <li v-for="item in commentList" :key="item.commentId">
                      <div class="valuator_top">
                        <!-- 头像 -->
                        <div class="portrait">
                          <img
                            :src="require('../assets/img/3q.png')"
                            alt=""
                            v-show="item.sex == '女' || item.sex == null"
                          />
                          <img
                            :src="require('../assets/img/8O.png')"
                            alt=""
                            v-show="item.sex == '男'"
                          />
                          <div class="grade">Lv.20</div>
                        </div>
                        <!-- 用户名称 -->
                        <div class="user">
                          <strong>{{ item.customerName }}</strong>
                        </div>
                        <div class="medal">
                          <img :src="item.iconUrl" alt="" />
                        </div>

                        <div class="starlevel">
                          <ul>
                            <li v-for="(i, index) in item.rate" :key="index">
                              <img
                                :src="require('../assets/img/ut.png')"
                                alt=""
                              />
                            </li>
                            <li
                              v-for="(is, indexs) in 5 - item.rate"
                              :key="indexs + 'ggg'"
                            >
                              <img
                                :src="require('../assets/img/fs.png')"
                                alt=""
                              />
                            </li>
                          </ul>
                          <span
                            ><strong>{{ item.rate }}.0</strong></span
                          >
                        </div>
                      </div>
                      <div class="valuator_title">
                        {{ item.content }}
                      </div>
                      <div class="valuator_img">
                        <ul>
                          <li
                            v-for="img in item.commnentImages"
                            :key="img.commentImageId"
                          >
                            <img
                              v-lazy="
                                'https://qiniu-cdn0.jinxidao.com/' +
                                img.imageURL
                              "
                              alt=""
                            />
                          </li>
                        </ul>
                      </div>
                      <div class="valuator_choose">
                        {{ item.productPackageName }}
                      </div>
                      <div class="buyTime">
                        <p>
                          {{ item.commentDate }}
                          <span>{{ item.travelType }}</span>
                        </p>
                        <div
                          :class="[
                            'fabulous',
                            'iconfont',
                            'icon-dianzan',
                            item.isHasSetGood ? 'con' : '',
                          ]"
                          @click="zan(item.commentId)"
                        >
                          <span>{{ item.goodCount }}</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="last">
                    <img :src="require('../assets/img/A8.png')" alt="" />
                    <p>已经全部加载完成</p>
                    <img :src="require('../assets/img/ae.png')" alt="" />
                  </div>
                </div>
              </div>
            </lazy-component>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 头部 end   -->
    </div>
    <!-- 弹出框 -->
    <van-popup v-model="show" closeable position:center>
      <div class="popup">
        <div class="title">房型说明</div>
        <div class="popimg">
          <img :src="'https://qiniu-cdn0.jinxidao.com/' + popimageUrl" alt="" />
        </div>
        <div class="describe">
          {{ packageName }}
        </div>
        <div class="tip">
          <ul>
            <li>床型：{{ popbedTypeName }}（{{ popbedSize }}）</li>
            <li>面积：{{ poproomArea }}㎡</li>
            <li>早餐：{{ popbreakfast }}</li>
            <li>窗户：{{ popwindow }}</li>
          </ul>
        </div>

        <div class="explain">
          <h4>【特别说明】</h4>
          <ul>
            <li>早餐时间:08:00-10:30。</li>
            <li>公共温泉开放时间:08:30-22:30(住客凭房卡使用)。</li>
            <li>
              早餐加购政策:可免费携带1名1.2m以下儿童,超出人数需另收费,1.2-1.5m儿童可享优惠价,其余全价(仅供参考，具体以酒店为准)。
            </li>
            <li>
              温泉加购政策:可免费携带1名1.2m以下儿童,超出人数需另收费,1.2-1.5m儿童可享优惠价(平日48元/人,周末及节假日58元/人),其余全价(平日88元/人,周末及节假日108元/人)(仅供参考,具体以酒店为准)。
            </li>
            <li>
              <span>自助晚餐时间:18:00-21:00。</span> 晚餐为赠送项目,送完即止。
            </li>
          </ul>
          <h4>【订房说明】</h4>
          <ul>
            <li>
              订单提交后需在线支付所有房费,支付成功后请等待确认订单,确认后方表示预订成功。
            </li>
            <li>
              如未确认预订成功，已支付费用将全部原路退还，退还金额境内卡5个工作日内到账,境外卡20个工作日内到账。
            </li>
          </ul>
        </div>
        <div class="rule">
          <h4>【退订规则】</h4>
          <ul>
            <li>本产品预订成功后,不支持退订,敬请谅解。</li>
          </ul>
          <h4>【改期规则】</h4>
          <ul>
            <li>
              <p>{{ popitemName }}</p>
              本产品预订成功后,不支持改期,敬请谅解。
            </li>
          </ul>
        </div>

        <div class="facilities">
          <h4>【全部设施】</h4>
          <ul>
            <li v-for="item in popserviceFacilities" :key="item.name">
              <div class="facilitiesimg">
                <img
                  :src="'https://qiniu-cdn0.jinxidao.com/' + item.icon"
                  alt=""
                />
              </div>
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>

        <div class="poptab">
          <p>
            ￥<span
              ><strong>{{ popminiPrice }}</strong></span
            >起
          </p>
          <button @click="bookdata(popminiPrice)">预订</button>
        </div>
      </div>
    </van-popup>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom_left">
        <div class="call_center iconfont icon-kefuerji">
          <p>客服</p>
        </div>
        <ul @click="switchlike">
          <li v-if="!like">
            <img :src="require('../assets/img/ag1.png')" alt="" />
            <p>收藏</p>
          </li>
          <li v-else-if="like">
            <img :src="require('../assets/img/4Z.png')" alt="" />
            <p>收藏</p>
          </li>
        </ul>
        <div class="share">
          <img :src="require('../assets/img/4K1.png')" alt="" />
          <p>分享</p>
        </div>
      </div>
      <div class="bottom_right" @click="looks">查看产品</div>
    </div>

    <!-- 回到顶部 -->
    <div class="top" v-show="movetop" @click="moveTopscroll">
      <img :src="require('../assets/img/Tv.png')" alt="" />
    </div>
  </div>
</template>

<script>
import { getJsonDetailsData } from "../api/details.js";
// import { getJsonEvaluateData } from "../api/evaluate.js";
import { getJsonEvaluateData, getcityTitleData } from "../api/comment.js";
// import { getJsonHomeSelectedData } from "../api/homeSelected.js";
export default {
  props: ["cityNameAbbr", "cityId", "cityCode"],
  data() {
    return {
      show: false,
      active: 0,
      activeName: "1",
      value: 4.5,
      productId: 0,
      productImg: null,
      information: null,
      back: null,
      informationTitleOne: null,
      informationTitleTwo: null,
      productIntroduction: null,
      address: null,
      latitude: "",
      longitude: "",
      lists: null,
      month: 0,
      day: 0,
      look: false,
      like: false,
      movetop: false,
      type: 1,
      reviewer: null,
      commentList: null,
      agree: [],
      poper: null,
      packageName: null,
      popimageUrl: null,
      popbedTypeName: null,
      poproomArea: null,
      popbedSize: null,
      popbreakfast: null,
      popwindow: null,
      popitemName: null,
      popserviceFacilities: null,
      popminiPrice: null,
      poppackageName: null,
      weather: null,
      temperature: null,
      sellPrice: null,
      retailPrice: null,
      saledCount: null,
      FavoritesList: [],
      Mycomments:[],
      Mycom:null,
    };
  },
  methods: {
    scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动条滚动的距离
      // let scrollStep = scrollTop - this.oldScrollTop;
      // console.log("header 滚动距离 ", scrollTop);
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;

      //变量windowHeight是可视区的高度
      // let windowHeight =
      //   document.documentElement.clientHeight || document.body.clientHeight;
      // //变量scrollHeight是滚动条的总高度
      // let scrollHeight =
      //   document.documentElement.scrollHeight || document.body.scrollHeight;

      if (scrollTop > 100) {
        this.movetop = true;
        console.log();
      } else {
        this.movetop = false;
      }
    },
    // 回到顶部
    moveTopscroll() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            100;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    looks() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
       let type=this.$refs.type.offsetTop
      console.log(this.$refs.type.offsetTop);
      const timeTop = setInterval(() => {
        if (top <= type) {
          document.body.scrollTop =
            document.documentElement.scrollTop =
            top +=
              100;
          if (top >= type) {
            clearInterval(timeTop);
          }
        } else if (top >= type) {
          document.body.scrollTop =
            document.documentElement.scrollTop =
            top -=
              100;
          if (top <= type) {
            clearInterval(timeTop);
          }
        }
      }, 10);
    },
    point() {
      this.active = 1;
    },
    // 收藏
    switchlike() {
      let token = window.localStorage.getItem("token");
      if (token) {
        this.like = !this.like;
        if (this.like == true) {
          if (JSON.parse(localStorage.getItem("Collection"))) {
            this.FavoritesList = JSON.parse(localStorage.getItem("Collection"));
          }
          this.$toast("已收藏");
          this.FavoritesList.push({
            productId: this.productId,
            productImg: this.productImg,
            informationTitleOne: this.informationTitleOne,
            informationTitleTwo: this.informationTitleTwo,
            sellPrice: this.sellPrice,
            retailPrice: this.retailPrice,
            saledCount: this.saledCount,
            check: false,
          });
          window.localStorage.setItem(
            "Collection",
            JSON.stringify(this.FavoritesList)
          );
        } else {
          this.$toast("取消收藏");
          let index = this.FavoritesList.findIndex((item) => {
            return item.productId == this.productId;
          });
          this.FavoritesList.splice(index, 1);
          window.localStorage.setItem(
            "Collection",
            JSON.stringify(this.FavoritesList)
          );
        }
      } else {
        this.$toast("未登录，请先登录");
        this.$router.push("/login");
      }
    },
    buyknow() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        if (top <= 790) {
          document.body.scrollTop =
            document.documentElement.scrollTop =
            top +=
              100;
          if (top >= 790) {
            clearInterval(timeTop);
          }
        } else if (top >= 790) {
          document.body.scrollTop =
            document.documentElement.scrollTop =
            top -=
              100;
          if (top <= 790) {
            clearInterval(timeTop);
          }
        }
      }, 10);
    },
    // 弹框显示
    Package(id) {
      this.show = true;
      // this.poper=this.lists.filter(item=>{
      //  return item.packageInfos[0].filter(items=>{
      //    return items.productPackageId==id
      //   })
      // })
      for (let i = 0; i < this.lists.length; i++) {
        for (let j = 0; j < this.lists[i].packageInfos[0].length; j++) {
          if (this.lists[i].packageInfos[0][j].productPackageId == id) {
            this.poper = this.lists[i].packageInfos[0][j];
          }
        }
      }
      this.packageName = this.poper.packageName;
      this.popimageUrl = this.poper.imageUrl;
      this.poproomArea = this.poper.roomArea;
      this.popbedTypeName = this.poper.bedTypeName;
      this.popbedSize = this.poper.bedSize;
      this.popbreakfast = this.poper.breakfast;
      this.popwindow = this.poper.window;
      this.popitemName = this.poper.itemImages[0].itemName;
      this.popserviceFacilities = this.poper.serviceFacilities;
      this.popminiPrice = this.poper.miniPrice;
      console.log(this.poper.packageName);
    },
    // 全部评论
    all() {
      (this.commentList = null), (this.type = 1);
      this.commentList = this.reviewer;
      this.Mycom = this.Mycomments;
    },
    // 好评
    Wellreceived() {
      (this.commentList = null), (this.type = 2);
      this.commentList = this.reviewer.filter((item) => {
        return item.rate >= 4;
      });
      this.Mycom=this.Mycomments.filter((item) => {
        return item.value >= 4;
      });
      // this.commentList=this.Mycomments.concat(this.commentList)
      console.log(this.commentList);
    },
    // 差评
    negativecomment() {
      (this.commentList = null), (this.type = 3);
      this.commentList = this.reviewer.filter((item) => {
        return item.rate <= 3;
      });
      this.Mycom=this.Mycomments.filter((item) => {
        return item.value <= 3;
      });
      console.log(this.commentList);
    },
    // 有图
    haveimg() {
      (this.commentList = null), (this.type = 4);
      this.commentList = this.reviewer.filter((item) => {
        return item.commnentImages.length != 0;
      });
       this.Mycom=this.Mycomments.filter((item) => {
        return item.fileList.length != 0;
      });
      console.log(this.Mycom);
    },
    // 点赞
    zan(zanid) {
      // console.log(zanid);
      let index = this.commentList.findIndex((item) => {
        return item.commentId == zanid;
      });

      if (this.commentList[index].isHasSetGood != true) {
        this.commentList[index].isHasSetGood = true;
        this.commentList[index].goodCount += 1;
        if (this.agree.indexOf(zanid) == -1) {
          this.agree.push(zanid);
        }
        window.localStorage.setItem("givelike", JSON.stringify(this.agree));
      } else {
        this.commentList[index].goodCount -= 1;
        this.commentList[index].isHasSetGood = false;
        let indexs = this.agree.findIndex((item) => {
          return item == zanid;
        });
        this.agree.splice(indexs, 1);
        window.localStorage.setItem("givelike", JSON.stringify(this.agree));
      }
    },
    bookdata(id) {
      let token = window.localStorage.getItem("token");
      if (token) {
        for (let i = 0; i < this.lists.length; i++) {
          for (let j = 0; j < this.lists[i].packageInfos[0].length; j++) {
            if (this.lists[i].packageInfos[0][j].productPackageId == id) {
              this.poper = this.lists[i].packageInfos[0][j];
            }
          }
        }
        this.popitemName = this.poper.itemImages[0].itemName;
        this.popminiPrice = this.poper.miniPrice;
        this.poppackageName = this.poper.packageName;
        console.log(this.poppackageName);
        this.$router.push(
          "/data?title=" +
            this.informationTitleOne +
            "&describe=" +
            this.popitemName +
            "&price=" +
            this.popminiPrice +
            "&packageName=" +
            this.poppackageName +
            "&productImg=" +
            this.productImg +
            "&popitemName=" +
            this.popitemName+
            "&productId=" +
            this.productId
        );
      } else {
        this.$toast("未登录，请先登录");
        this.$router.push("/login");
      }
    },
  },
  created() {

    this.productId = this.$route.query.productId;
    console.log(this.productId);

    // 我的评价
    if (JSON.parse(localStorage.getItem("Mycomments"))) {
        this.Mycomments = JSON.parse(localStorage.getItem("Mycomments"));
          console.log(this.Mycomments);
       this.Mycom= this.Mycomments=this.Mycomments.filter(item=>{
          return item.productId==this.productId
        })
      console.log(this.Mycomments);
    }else{
      this.Mycomments=null
    }
    this.productImg = this.$route.query.productImg;
    this.back = this.$route.query.back;
    if (JSON.parse(localStorage.getItem("givelike"))) {
      this.agree = JSON.parse(localStorage.getItem("givelike"));
      // console.log(this.agree);
    }
    if(JSON.parse(localStorage.getItem("Collection"))){
      this.FavoritesList = JSON.parse(localStorage.getItem("Collection"));
      console.log(this.FavoritesList);
      let index = this.FavoritesList.findIndex((item) => {
        return item.productId == this.productId;
      });
      console.log(index);
      if(index!=-1){

        if(this.FavoritesList[index].productId == this.productId) {
          this.like = true;
        }else{
          this.like = false;
        }
      }
    }

    getcityTitleData({ productId: this.productId }).then((data) => {
      console.log(data);
      this.information = data.data;
      this.informationTitleOne = this.information.productName;
      this.informationTitleTwo = this.information.appSubTitle;
      this.address = this.information.address;
      this.latitude = this.information.latitude;
      this.longitude = this.information.longitude;
      this.weather = this.information.weatherInfo[0].weather_Data[0].weather;
      this.temperature =
        this.information.weatherInfo[0].weather_Data[0].temperature;
      this.sellPrice = this.information.sellPrice;
      this.retailPrice = this.information.retailPrice;
      this.saledCount = this.information.saledCount;
      console.log(this.weatherInfo);
    });

    // getJsonHomeSelectedData({cityCode:this.cityCode}).then((data)=>{
    //   this.informationImg = data.content.content.filter(item=>{
    //     return item.productId==this.productId
    //   });
    //   this.informationImg=this.informationImg[0].bigImageUrl
    //   console.log(this.informationImg);
    // })

    let today = new Date();
    this.month = today.getMonth() + 1;
    this.day = today.getDate();

    getJsonDetailsData().then((data) => {
      this.information = data.data[0];
      this.lists = this.information.lists;
      this.productIntroduction = this.information.productIntroduction;
    });
    // 评价
    getJsonEvaluateData({ productId: this.productId }).then((data) => {
      // this.reviewer = data.data.filter(
      //   (item) => item.productId == this.productId
      // );
      this.commentList = this.reviewer = data.data.commentInfos;
      console.log(this.agree);
      for (let i = 0; i < this.agree.length; i++) {
        for (let j = 0; j < this.commentList.length; j++) {
          if (this.agree[i] == this.commentList[j].commentId) {
            // console.log(this.commentList[j].commentId);
            this.commentList[j].isHasSetGood = true;
            this.commentList[j].goodCount += 1;
          }
        }
      }
    });
  },

  mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrolling);
  },
};
</script>

<style lang="scss" scoped>
.details {
  height: 100%;
  position: relative;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;

    .header {
      // width: 100%;
      height: 50px;
      display: flex;
      //   align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_right.van-tabs {
        width: 100%;
      }
      .header_right.van-tabs > ::v-deep .van-tabs__nav {
        justify-content: space-evenly;
      }
      .header_right.van-tabs > ::v-deep .van-tabs--line,
      .header_right.van-tabs > ::v-deep .van-tabs__wrap {
        height: 50px;
      }
      .header_right.van-tabs > ::v-deep .van-tab {
        line-height: 50px;
        font-size: 16px;
        padding: 0 22px;
        -webkit-box-flex: 0;
        -webkit-flex: 0;
        flex: 0;
      }
      .van-tabs ::v-deep .van-tabs__line {
        width: 60px;
        background-color: #fc9632;
      }

      .header_right.van-tabs > ::v-deep .van-tabs__content--animated {
        width: calc(100% + 52px);
        position: absolute;
        left: -36px;
        background-color: #f0eee2;
      }
      .product {
        .img {
          width: 100%;
          height: 200px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .work {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #fff;
          .title {
            flex: 1;
            margin: 15px 0;
            padding: 0 10px;
            font-size: 14px;
            line-height: 20px;
            border-right: 1px solid rgb(205, 205, 205);
          }
          .customerService {
            padding: 0 15px;
            font-size: 26px;
            color: #fc9632;
            p {
              font-size: 13px;
            }
          }
        }
        .vip {
          margin: 10px 16px;
          background-color: #363533;
          border-radius: 24px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 8px;
          .imgs {
            height: 100%;
            display: flex;
            align-items: center;
            img {
              width: 34px;
              height: 34px;
            }
            p {
              color: #e8995c;
              font-size: 12px;
              margin-left: 6px;
            }
          }
          .receive {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 26px;
            border-radius: 13px;
            font-size: 12px;
            background-image: linear-gradient(#d08e4f, 40%, #f5dfba);
          }
        }
        .score {
          background-color: #fff;
          // height: 80px;
          margin-bottom: 10px;
          padding: 0 16px;
          .score_top {
            padding: 13px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .star {
              span {
                padding-left: 10px;
                color: #1c1000;
                font-weight: bold;
                font-size: 14px;
              }
            }
            .comment {
              color: #b2adaa;
              font-size: 12px;
            }
          }
          .score_bottom {
            padding-bottom: 8px;
            ul {
              display: flex;
              flex-wrap: wrap;
              li {
                font-size: 10px;
                height: 22px;
                line-height: 22px;
                padding: 0 10px;
                margin: 0 8px 8px 0;
                background-color: #fff9ee;
              }
            }
          }
        }
        .address {
          background-color: #fff;
          padding: 5px 16px;
          border-bottom: 1px solid rgb(221, 221, 221);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .location {
            p {
              height: 21px;
              line-height: 21px;
              &:nth-child(1) {
                font-size: 14px;
                color: #1c1000;
              }
              &:nth-child(2) {
                font-size: 11px;
                color: #8f8c84;
              }
            }
          }
          .go {
            color: #999;
            font-size: 18px;
          }
        }
        .characteristic,
        .know {
          background-color: #fff;
          height: 38px;
          padding: 0 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            color: #2d2219;
            font-size: 12px;
          }
          .go {
            color: #999;
            font-size: 18px;
          }
        }
        .know {
          margin-bottom: 10px;
        }
        .producetype {
          margin-bottom: 10px;
          .van-collapse-item ::v-deep .van-cell__value {
            color: #fc5500;
            font-size: 12px;
          }
          .van-collapse-item ::v-deep .van-collapse-item__content {
            background-color: #f9f8f3;
            // background-color: #f5dfba;
            padding-bottom: 0;
          }
          .van-collapse-item ::v-deep .van-collapse-item__wrapper {
            background-color: #f9f8f3;
          }
          .more {
            background-color: #fff;
            padding: 10px;
            margin-bottom: 16px;
            border-radius: 8px;
            p.more_title {
              color: #1c1000;
              font-weight: bold;
              font-size: 15px;
            }
            .condition {
              ul {
                display: flex;
                li {
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  transform: scale(0.9);
                  &:nth-last-of-type(1) {
                    span {
                      display: none;
                    }
                  }
                  span {
                    font-size: 22px;
                    padding: 0 5px;
                  }
                }
              }
            }
            .pricelist {
              display: flex;
              // align-items: flex-end;
              align-items: center;
              justify-content: space-between;
              .three {
                display: flex;
                align-items: flex-end;
                .price {
                  font-size: 10px;
                  color: #f14800;
                  span {
                    font-size: 20px;
                  }
                }
                .oldprice {
                  font-size: 12px;
                  text-decoration: line-through;
                  padding-left: 8px;
                }
                .explain {
                  padding-left: 8px;
                  p {
                    color: #969799;
                  }
                }
              }
              .reserve {
                background-color: #fe821d;
                width: 38px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                text-align: center;
                color: #f0eee2;
              }
            }
            .book {
              color: #969799;
              font-size: 10px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
        .PurchaseInstructions {
          background-color: #fff;
          padding: 10px 16px 60px;
          h3 {
            color: #3c3c3a;
          }
          h5 {
            height: 50px;
            line-height: 50px;
            color: #3c3c3a;
          }
          h5.important {
            color: #ed0019;
          }
          p {
            color: #76716d;
            font-size: 14px;
            padding: 9px;
          }
          .lookup {
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: #412a15;
            font-weight: bold;
            border-top: 1px solid #ccc;
            text-align: center;
          }
        }
      }

      .particulars {
        img {
          margin: 10px 0;
        }
      }
       .myassess {
        &>.valuators {
          padding: 0 16px 0px;
          background-color: #fff;
          & > ul {
            & > li {
              border-bottom: 1px solid rgb(215, 215, 215);
              padding-bottom: 20px;
              .valuator_top {
                display: flex;
                align-items: flex-end;
                padding: 20px 0;
                // 头像
                .portrait {
                  position: relative;
                  width: 30px;
                  height: 30px;
                  img {
                    width: 30px;
                  }
                  .grade {
                    position: absolute;
                    left: -8px;
                    bottom: -5px;
                    font-size: 10px;
                    transform: scale(0.7);
                    background-color: #fe821d;
                    color: #fff;
                    padding: 1px 8px;
                    border-radius: 8px;
                  }
                }
                .user {
                  color: #5c4127;
                  padding: 0 8px 0 15px;
                }
                .medal {
                  img {
                    width: 20px;
                  }
                }
                .starlevel {
                  display: flex;
                  align-items: center;
                  ul {
                    display: flex;
                    li {
                      img {
                        width: 20px;
                      }
                    }
                  }
                  span {
                    color: #fe821d;
                    font-size: 14px;
                  }
                }
              }
              .valuator_title {
                font-size: 14px;
              }
              .valuator_img {
                overflow: hidden;
                ul {
                  display: flex;
                  flex-wrap: wrap;
                  // justify-content: center;
                  padding-top: 16px;
                  li {
                    width: 25%;
                    padding: 0 0 16px 0;
                    img {
                      width: 75px;
                      height: 75px;
                    }
                  }
                }
              }
              .valuator_choose {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                font-size: 12px;
                color: #b2adaa;
              }
              .buyTime {
                padding-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                p {
                  font-size: 10px;
                  color: #b2adaa;
                  span {
                    color: #ccc;
                    padding-left: 14px;
                  }
                }
                .fabulous {
                  height: 20px;
                  line-height: 20px;
                  color: #c9c1a8;
                  border: 1px solid #c9c1a8;
                  padding: 0px 10px;
                  border-radius: 15px;
                  span {
                    padding-left: 3px;
                  }
                }
                .fabulous.con {
                  color: #fe821d;
                  border: 1px solid #fe821d;
                }
              }
              // &:nth-last-child(1) {
              //   border-bottom: 0;
              // }
            }
          }
        }
      }
      .assess {
        & > ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          background-color: #fff;
          padding-top: 20px;
          margin-bottom: 14px;
          & > li {
            border: 1px solid #ccc;
            background-color: #fff;
            color: #412a15;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin: 0 16px 16px;
          }
          & > li.con {
            background-color: #fe821d;
            color: #fff;
          }
        }
        .valuator {
          padding: 0 16px 50px;
          // padding-bottom: 50px;
          background-color: #fff;
          & > ul {
            & > li {
              border-bottom: 1px solid rgb(215, 215, 215);
              padding-bottom: 20px;
              .valuator_top {
                display: flex;
                align-items: flex-end;
                padding: 20px 0;
                // 头像
                .portrait {
                  position: relative;
                  width: 30px;
                  height: 30px;
                  img {
                    width: 30px;
                  }
                  .grade {
                    position: absolute;
                    left: -8px;
                    bottom: -5px;
                    font-size: 10px;
                    transform: scale(0.7);
                    background-color: #fe821d;
                    color: #fff;
                    padding: 1px 8px;
                    border-radius: 8px;
                  }
                }
                .user {
                  color: #5c4127;
                  padding: 0 8px 0 15px;
                }
                .medal {
                  img {
                    width: 20px;
                  }
                }
                .starlevel {
                  display: flex;
                  align-items: center;
                  ul {
                    display: flex;
                    li {
                      img {
                        width: 20px;
                      }
                    }
                  }
                  span {
                    color: #fe821d;
                    font-size: 14px;
                  }
                }
              }
              .valuator_title {
                font-size: 14px;
              }
              .valuator_img {
                overflow: hidden;
                ul {
                  display: flex;
                  flex-wrap: wrap;
                  // justify-content: center;
                  padding-top: 16px;
                  li {
                    width: 25%;
                    padding: 0 0 16px 0;
                    img {
                      width: 75px;
                      height: 75px;
                    }
                  }
                }
              }
              .valuator_choose {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                font-size: 12px;
                color: #b2adaa;
              }
              .buyTime {
                padding-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                p {
                  font-size: 10px;
                  color: #b2adaa;
                  span {
                    color: #ccc;
                    padding-left: 14px;
                  }
                }
                .fabulous {
                  height: 20px;
                  line-height: 20px;
                  color: #c9c1a8;
                  border: 1px solid #c9c1a8;
                  padding: 0px 10px;
                  border-radius: 15px;
                  span {
                    padding-left: 3px;
                  }
                }
                .fabulous.con {
                  color: #fe821d;
                  border: 1px solid #fe821d;
                }
              }
              &:nth-last-child(1) {
                border-bottom: 0;
              }
            }
          }
          .last {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              height: 5px;
            }
            p {
              color: #c9c1a8;
              font-size: 14px;
              padding: 0 10px;
            }
          }
        }
      }
    }
    .scolly {
      overflow-y: scroll;
    }
  }
  .bottom {
    background-color: rgb(255, 255, 255);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 50px;
    box-shadow: 0 3px 14px 2px rgb(0 0 0 / 14%);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom_left {
      flex: 1;
      display: flex;
      justify-content: space-around;
      .call_center {
        text-align: center;
        font-size: 20px;
        color: #412a15;
        p {
          font-size: 12px;
        }
      }
      ul {
        display: flex;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 20px;
            display: block;
          }
          p {
            font-size: 12px;
            color: #412a15;
          }
        }
      }
      .share {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 20px;
          display: block;
        }
        p {
          font-size: 12px;
          color: #412a15;
        }
      }
    }
    .bottom_right {
      width: 180px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      background-color: #fe821d;
      border-radius: 20px;
    }
  }
  .top {
    z-index: 5;
    position: fixed;
    right: 10px;
    bottom: 70px;
    img {
      width: 40px;
    }
  }
  .van-popup__close-icon--top-right {
    top: 8px;
  }
  .popup {
    overflow-y: scroll;
    width: 330px;
    height: 550px;
    padding: 0 12px 52px;
    .title {
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #837a72;
      position: fixed;
      top: 0;
      left: -1px;
      background-color: #fff;
      width: 100%;
    }
    .popimg {
      height: 224px;
      margin-top: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .describe {
      color: #232220;
      font-size: 13px;
      padding: 14px 0 8px 0;
    }
    .tip {
      ul {
        li {
          font-size: 10px;
          color: #837a72;
        }
      }
    }
    .explain {
      padding-bottom: 38px;
      border-bottom: 1px solid #f9f8f7;
      h4 {
        font-size: 12px;
        color: #fd6a07;
        height: 66px;
        line-height: 66px;
      }
      ul {
        list-style-type: disc;
        font-size: 14px;
        color: #837a72;
        margin-left: 14px;
      }
    }
    .rule {
      padding: 23px 0 30px 0;
      border-bottom: 1px solid #e4e6e9;
      h4 {
        font-size: 12px;
        color: #ff9100;
        height: 30px;
        line-height: 30px;
      }
      ul {
        list-style-type: disc;
        font-size: 14px;
        color: #837a72;
        margin-left: 14px;
        li {
          p {
            color: #64461e;
          }
        }
      }
    }
    .facilities {
      h4 {
        font-size: 12px;
        color: #fd6a07;
        padding: 24px 0 16px 0;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          display: flex;
          padding: 13px;
          .facilitiesimg {
            width: 18px;
            height: 18px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p {
            font-size: 14px;
            color: #837a72;
            padding-left: 5px;
          }
        }
      }
    }
    .poptab {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      height: 52px;
      width: 100%;
      background-color: #fff;
      align-items: center;
      justify-content: space-between;
      p {
        color: #fd6a07;
        font-size: 14px;
        padding-left: 12px;
        flex: 1;
        span {
          font-size: 20px;
        }
      }
      button {
        width: 236px;
        color: #fff;
        background-color: #ff9100;
        height: 52px;
        border: 0;
      }
    }
  }
}
</style>